<template>
    <div>
        <br/>
        <br/>
        <el-form ref="route" :model="ltname" >
            <el-form-item label="收货人" :label-width="formLabelWidth">
                <el-input placeholder="请输入内容" v-model="ltname.shippingName" class="input-with-select" clearable>
                    <el-button slot="append" @click="listByRoute('shippingName')" icon="el-icon-search"></el-button>
                </el-input>
            </el-form-item>
        </el-form>

        <el-table
            :data="data"
            style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="流水号：">
                            <span>{{ props.row.oid }}</span>
                        </el-form-item>
                        <el-form-item label="商品编号：">
                            <span>{{ props.row.tid }}</span>
                        </el-form-item>
                        <el-form-item label="支付类型：">
                            <span>{{ props.row.payType }}</span>
                        </el-form-item>
                        <el-form-item label="账户：">
                            <span>{{ props.row.accountId }}</span>
                        </el-form-item>
                        <el-form-item label="收货人：">
                            <span>{{ props.row.shippingName }}</span>
                        </el-form-item>
                        <el-form-item label="收货地址：">
                            <span>{{ props.row.shippingAddress }}</span>
                        </el-form-item>
                        <el-form-item label="收货电话：">
                            <span>{{ props.row.shippingPhone }}</span>
                        </el-form-item>
                        <el-form-item label="发送方式：">
                            <span>{{ props.row.postWay }}</span>
                        </el-form-item>
                        <el-form-item label="配送费：">
                            <span>{{ props.row.postFee }}</span>
                        </el-form-item>
                        <el-form-item label="订单总价：">
                            <span>{{ props.row.totalPrice }}</span>
                        </el-form-item>
                        <el-form-item label="创建时间：">
                            <span>{{ props.row.createDate }}</span>
                        </el-form-item>
                        <el-form-item label="更新时间：">
                            <span>{{ props.row.updateDate }}</span>
                        </el-form-item>

                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                label="流水号"
                prop="oid">
            </el-table-column>
            <el-table-column
                label="商品编号"
                prop="tid">
            </el-table-column>
            <el-table-column
                label="下单账户"
                prop="accountId">
            </el-table-column>
            <el-table-column
                label="收货人"
                prop="shippingName">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.status === 0">未付款</el-tag>
                    <el-tag type="success" v-if="scope.row.status === 1">发货中</el-tag>
                    <el-tag type="info" v-if="scope.row.status === 2">已完成</el-tag>
                    <el-tag type="warning" v-if="scope.row.status === 4">已失效</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="创建时间"
                prop="createDate">
            </el-table-column>
        </el-table>
        <br/>
        <div class="page">
            <el-pagination
                background
                center
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                :page-sizes="pageList"
                layout="total, sizes, prev, pager, next, jumper"
                :total="list.length">
                <!--           layout加上 sizes,    :page-sizes="[6, 7, 8, 9 ,10]"-->
            </el-pagination>
        </div>

    </div>


</template>

<script>
    export default {
        name: "Order",
        data() {
            return {
                // 当前页
                currentPage: 1,
                // 每页显示 5 条数据
                pageSize: 5,
                // 每页显示多少条数据的数组
                pageList: [5,10,15,20],
                list: [],
                ltname:{
                    shippingName:null
                },
                formLabelWidth: '120px',
            }
        },

        created() {
            this.$http.post("order/order/selectAll").then(data => {
                this.list = data.data;
                console.log(data.data);
            })
        },
        computed: {
            // 计算分页所显示的数据
            data() {
                if(this.list != null){
                    // 使用 splice 方法从第几个开始取出多少条数据
                    return this.list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
                }

            }
        },
        methods: {
            // 修改当前页显示 多少数据
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize = val;
            },
            // 修改当前是 第几页
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            listByRoute(){
                if(this.ltname.shippingName == null){
                    this.$http.post("order/order/selectAll").then(data => {
                        this.list = data.data;
                    })
                    this.reload();
                }else {
                    this.$http.post("order/order/listBySname",this.ltname).then(data => {
                        this.list = data.data;
                    })
                }
            }
        }

    }
</script>

<style scoped>

    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

</style>
